/*-----------------------------------*/
/* Buttons */
/*-----------------------------------*/

  .buttons-wrap {padding: 30px 14px 0;}
  .buttons .btn {margin: 0 15px 30px !important;}
  @media (max-width: 479px), (min-width: 768px) and (max-width: 991px) {
    .buttons .btn {margin: 0 2px 30px !important;}
  }

  .btn:hover, .btn:focus {
    -webkit-transition: background-position .0s linear;
    -moz-transition: background-position .0s linear;
    -o-transition: background-position .0s linear;
    transition: background-position .0s linear;
  }
  .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    background-color: transparent;
  }
  .btn.active, .btn:active {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .btn {
    position: relative;
    display: inline-block;
    padding: 0;
    border: none;
    background: none;
    margin: 0 10px 10px;
  }
  .btn span,
  .btn input {
    display:block;
    padding: 0 18px;
    height: 42px;
    line-height: 42px;
    outline: none;
    font-size: @button-font-size;
    font-weight: 600;
    color: @button-text-color;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.36);
    white-space: nowrap;
    border: none;
    background-color: @button-bg-color;
    -webkit-transition: all 0.16s ease;
    -moz-transition: all 0.16s ease;
    -ms-transition: all 0.16s ease;
    transition: all 0.16s ease;
    /*Needed for Background icons*/
    position: relative;
    z-index: 0;
    overflow: hidden;
  }
  .btn-full {display: block; margin: 0;}
  .btn-caps span, .btn-caps input {text-transform: uppercase;}
  .btn-shadow span, .btn-shadow input {-webkit-box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.2); box-shadow: 2px 2px 3px -1px rgba(0,0,0,0.2);}
  .btn-shadow.btn-right span, .btn-shadow.btn-right input {-webkit-box-shadow: -2px 2px 3px -1px rgba(0,0,0,0.2); box-shadow: -2px 2px 3px -1px rgba(0,0,0,0.2);}
  .btn-underlined span, .btn-underlined input {text-decoration: underline;}
  .btn-large span, .btn-large input {height: 70px; line-height: 70px; font-size: @button-font-size * 1.75; font-weight: 700;}

  .btn:hover span, .btn:hover input, .btn.hover span, .btn.hover input {color: @button-text-color-hover; background-color: @button-bg-color-hover;}
  .btn:active span, .btn:active input, .btn.active span, .btn.active input {color: @button-text-color-active; background-color: @button-bg-color-active; -webkit-box-shadow: none; box-shadow: none;}

  .btn-green span, .btn-green input {color: @button-green-text-color; background-color: @button-green-bg-color;}
  .btn-green:hover span, .btn-green:hover input, .btn-green.hover span, .btn-green.hover input {color: @button-green-text-color-hover; background-color: @button-green-bg-color-hover;}
  .btn-green:active span, .btn-green:active input, .btn-green.active span, .btn-green.active input {color: @button-green-text-color-active; background-color: @button-green-bg-color-active;}

  .btn-red span, .btn-red input {color: @button-red-text-color; background-color: @button-red-bg-color;}
  .btn-red:hover span, .btn-red:hover input, .btn-red.hover span, .btn-red.hover input {color: @button-red-text-color-hover; background-color: @button-red-bg-color-hover;}
  .btn-red:active span, .btn-red:active input, .btn-red.active span, .btn-red.active input {color: @button-red-text-color-active; background-color: @button-red-bg-color-active;}

  .btn-transparent span, .btn-transparent input {color: @button-transparent-text-color; background-color: @button-transparent-bg-color;}
  .btn-transparent:hover span, .btn-transparent:hover input, .btn-transparent.hover span, .btn-transparent.hover input {color: @button-transparent-text-color-hover; background-color: @button-transparent-bg-color-hover;}
  .btn-transparent:active span, .btn-transparent:active input, .btn-transparent.active span, .btn-transparent.active input {color: @button-transparent-text-color-active; background-color: @button-transparent-bg-color-active;}

    /* Buttons with Arrows */
    /*-----------------------------------*/

  .btn-left {padding-left: 20px !important;}
  .btn-right {padding-right: 20px !important;}

  .btn-left:before,
  .btn-right:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 21px solid transparent;
    border-bottom: 21px solid transparent;
    border-right: 20px solid #7978b4;
    -webkit-transition: border-color 0.1s linear;
    -moz-transition: border-color 0.1s linear;
    -ms-transition: border-color 0.1s linear;
    transition: border-color 0.1s linear;
  }
  .btn-right:before {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 20px solid @button-bg-color;
  }
  .btn-left.btn:hover:before,
  .btn-right.btn:hover:before,
  .btn-left.btn.hover:before,
  .btn-right.btn.hover:before {
    border-left-color: @button-bg-color-hover;
    border-right-color: @button-bg-color-hover;
  }
  .btn-left.btn:active:before,
  .btn-right.btn:active:before,
  .btn-left.btn.active:before,
  .btn-right.btn.active:before {
    border-left-color: @button-bg-color-active;
    border-right-color: @button-bg-color-active;
  }
  .btn-left.btn-green:before,
  .btn-right.btn-green:before {
    border-left-color: @button-green-bg-color;
    border-right-color: @button-green-bg-color;
  }
  .btn-left.btn-green:hover:before,
  .btn-right.btn-green:hover:before,
  .btn-left.btn-green.hover:before,
  .btn-right.btn-green.hover:before {
    border-left-color: @button-green-bg-color-hover;
    border-right-color: @button-green-bg-color-hover;
  }
  .btn-left.btn-green:active:before,
  .btn-right.btn-green:active:before,
  .btn-left.btn-green.active:before,
  .btn-right.btn-green.active:before {
    border-left-color: @button-green-bg-color-active;
    border-right-color: @button-green-bg-color-active;
  }
  .btn-left.btn-red:before,
  .btn-right.btn-red:before {
    border-left-color: @button-red-bg-color;
    border-right-color: @button-red-bg-color;
  }
  .btn-left.btn-red:hover:before,
  .btn-right.btn-red:hover:before,
  .btn-left.btn-red.hover:before,
  .btn-right.btn-red.hover:before {
    border-left-color: @button-red-bg-color-hover;
    border-right-color: @button-red-bg-color-hover;
  }
  .btn-left.btn-red:active:before,
  .btn-right.btn-red:active:before,
  .btn-left.btn-red.active:before,
  .btn-right.btn-red.active:before {
    border-left-color: @button-red-bg-color-active;
    border-right-color: @button-red-bg-color-active;
  }
  .btn-left.btn-transparent:before,
  .btn-right.btn-transparent:before {
    border-left-color: @button-transparent-bg-color;
    border-right-color: @button-transparent-bg-color;
  }
  .btn-left.btn-transparent:hover:before,
  .btn-right.btn-transparent:hover:before,
  .btn-left.btn-transparent.hover:before,
  .btn-right.btn-transparent.hover:before {
    border-left-color: @button-transparent-bg-color-hover;
    border-right-color: @button-transparent-bg-color-hover;
  }
  .btn-left.btn-transparent:active:before,
  .btn-right.btn-transparent:active:before,
  .btn-left.btn-transparent.active:before,
  .btn-right.btn-transparent.active:before {
    border-left-color: @button-transparent-bg-color-active;
    border-right-color: @button-transparent-bg-color-active;
  }
  .btn-left span, .btn-left input {padding-left: 12px;}
  .btn-right span, .btn-right input {padding-right: 12px;}

    /* Buttons with Icons */
    /*-----------------------------------*/

  .btn .glyphicon {
    font-size: 42px;
    color: #8c8bc8;
    text-shadow: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 42px;
  }
  .btn-green .glyphicon {color: #aebc01;}
  .btn-red .glyphicon {color: #cf689d;}
  .btn-large .glyphicon {font-size: 70px; height: 70px;}

  .btn .glyphicon-shopping-cart {left: -2px;}
  .btn .glyphicon-download-alt {
    height: 44px;
    font-size: 50px;
    top: -2px;
    left: -4px;
    -webkit-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -o-transform: rotate(-20deg);
    transform: rotate(-20deg);
  }

    /* Buttons without Background */
    /*-----------------------------------*/

  .btn-no-bg {margin: 0;}

  .btn-no-bg span, .btn-no-bg input {
    background: none !important;
    font-size: @button-font-size * 0.88;
    font-weight: 700;
    color: #b8c901 !important;
    text-shadow: none;
    height: 24px;
    line-height: 24px;
    padding: 0;
  }
  .btn-no-bg [class*='icon-small-'] {
    font-size: 20px;
    line-height: 24px;
    margin: 0 0 0 12px;
    vertical-align: -30%;
  }